<!doctype html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <title>获取Display</title>
        <script>
            const displayMediaOptions = {
                video: {
                    displaySurface: "browser",
                    with: 720,
                    height: 720,
                },
                audio: {
                    suppressLocalAudioPlayback: true,
                },
                preferCurrentTab: false,
                selfBrowserSurface: "exclude",
                systemAudio: "include",
                surfaceSwitching: "include",
                monitorTypeSurfaces: "include",
            };

            async function startCapture(displayMediaOptions) {
                let captureStream = null;

                try {
                    captureStream =
                        await navigator.mediaDevices.getDisplayMedia(
                            displayMediaOptions,
                        );
                } catch (err) {
                    console.error("Error: " + err);
                }
                return captureStream;
            }

            function start() {
                startCapture(displayMediaOptions).then(function (stream) {
                    console.log(stream);
                    var videoTracks = stream.getVideoTracks();
                    //window.stream = stream; // make variable available to browser console
                    first.srcObject = stream;
                });
            }
        </script>
    </head>
    <body>
        <video autoplay controls id="first"></video>
        <button onclick="start()">Start</button>
    </body>
</html>
